<template>
	<view class="" @click="onClick">
		<template v-if="textPosition === 'left' || textPosition === 'right'">
			<view class="flex-center">
				<slot name="left"></slot>
				<u--image :fade="fade" :mode="mode" :lazyLoad="lazyLoad" :bgColor="bgColor" :showLoading="true" :src="src"
					:width="width" :height="height"></u--image>
				<slot name="right"></slot>
			</view>
		</template>
		<template v-if="textPosition === 'bottom' || textPosition === 'top'">
			<view class="text-center" v-if="textPosition === 'bottom'">
				<slot name="top"></slot>
				<view class="flex-center">
					<u--image :fade="fade" :lazyLoad="lazyLoad" :mode="mode" :bgColor="bgColor" :showLoading="true" :src="src"
						:width="width" :height="height"></u--image>
				</view>
				<slot name="bottom"></slot>
			</view>
		</template>
		<template v-if="textPosition === 'inner'">
			<view class="position-relative" :style="{width, height}">
				<view class="position-absolute" style="z-index: 1;">
					<u--image :lazyLoad="lazyLoad" :fade="fade" :mode="mode" :bgColor="bgColor" :showLoading="true" :src="src"
						:width="width" :height="height"></u--image>
				</view>
				<view class="position-relative full-width full-height" style="z-index: 2">
					<slot name="inner"></slot>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		name: 'YdImage',
		props: {
			src: {
				type: String,
				default: ''
			},
			// 文字位置 inner：图片内，bottom：图片底部，left：图片左侧，right：图片右侧，top：图片上部
			textPosition: {
				type: String,
				default: 'right'
			},

			// 图片背景颜色
			bgColor: {
				type: String,
				default: 'none'
			},

			lines: {
				type: Number,
				default: 0
			},
			// 图片宽高
			width: {
				type: [String, Number],
				default: '36rpx'
			},
			height: {
				type: [String, Number],
				default: '36rppx'
			},
			mode: {
				type: String,
				default: 'aspectFill'
			},
			fade: {
				type: Boolean,
				default: false
			},
			lazyLoad: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {}
		},
		methods: {
			onClick() {
				this.$emit('onClick')
			}
		}
	}
</script>

<style>
</style>